<template>
  <div class="dept-list">
    <div class="dept-top">
      <div class="dept-top-sty">
        <div class="title">
          <span>部门</span>
          <span>(</span>
          <span>{{ itemsLength }}</span>
          <span>)</span>
        </div>
        <div class="select-title">
          已选择<span>1</span>个部门
        </div>
      </div>
    </div>
    <div class="dept-bot">
      <radio-group v-model="radio" class="radios" @change="radioChange">
        <view
          v-for="(item, index) in items"
          :key="item.id"
          style="height: 32px;"
          class="uni-list-cell uni-list-cell-pd radio-group"
          @click="deptClick(item)"
        >
          <view>{{ item.name }}</view>
          <view>
            <radio
              style="transform: scale(0.6)"
              color="#739ECA"
              :value="item.id"
              icon-size="34px"
              :checked="index === current"
            />
          </view>
        </view>
      </radio-group>
    </div>
    <!-- <div class="btn-style">
      <button
        class="btn"
        type="primary"
        hover-class="btn-active"
        :disabled="disabled"
        @click="handleClick"
      >
        确认
      </button>
    </div> -->
  </div>
</template>
<script>
import { getDeptList } from '@/apis/project'
export default {
  data() {
    return {
      items: [],
      itemsLength: 0,
      current: 0,
      deptId: 0,
      deptName: '',
      obj: {},
    }
  },
  onLoad(options) {
    this.obj = options
  },
  mounted() {
    this.getDeptData()
  },
  methods: {
    // 单选框点击触发
    radioChange(evt) {
      this.deptId = evt.detail.value
      for (let j = 0; j < this.items.length; j++) {
        if (this.items[j].id == this.deptId) {
          this.deptName = this.items[j].name
        }
      }
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].value === evt.detail.value) {
          this.current = i
          break
        }
      }
      this.handleClick()
    },
    // 点击行选中
    deptClick(data) {
      // console.log(data, '选中行')
      // console.log(this.items, 'this.items')
      this.deptId = data.id
      for (let j = 0; j < this.items.length; j++) {
        if (this.items[j].id == this.deptId) {
          this.deptName = this.items[j].name
        }
      }
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].name === data.name) {
          this.current = i
          break
        }
      }
      this.handleClick()
    },
    // 设置选中数据
    setSelectItem(data) {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].id.toString() === data.deptId) {
          this.current = i
          break
        }
      }
    },
    // 获取部门list
    async getDeptData() {
      this.items = []
      const res = await getDeptList()
      console.log(res, '部门数据')
      // this.items = res.data
      if (res.data.length > 0) {
        // eslint-disable-next-line array-callback-return
        res.data.map((key) => {
          if (key.parentId != 0) {
            this.items.push(key)
          }
        })
      }
      this.itemsLength = this.items.length
      this.setSelectItem(this.obj)
      this.deptId = this.items[0].id
      this.deptName = this.items[0].name
    },
    // 提交按钮
    handleClick() {
      try {
        uni.setStorageSync('storage_dept', {
          deptId: this.deptId,
          deptName: this.deptName,
          type: 'dept',
        })
        uni.$emit('deptPageChange', { deptId: this.deptId, deptName: this.deptName, type: 'dept' })
      } catch (e) {
        // error
      }
      uni.navigateBack({
        url: `/pages/office/project-approval/index?deptId=${this.deptId}&deptName=${this.deptName}&type=dept`,
      })
      // uni.redirectTo({
      //   url: `/pages/office/project-approval/index?deptId=${this.deptId}&deptName=${this.deptName}&type=dept`,
      // })
    },
  },
}
</script>

<style lang="scss" scoped>
.dept-list {
  .dept-top {
    padding: 15px 0px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    .dept-top-sty {
      width: 93%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .title {
        color: #000;
        font-weight: 600;
        label {
          font-size: 14px;
        }
      }
      .select-title {
        font-size: 14px;
        color: #999;
      }
    }
  }
  .dept-bot {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    width: 93%;
    margin: 0 auto;
    margin-top: 10px;
    .radios {
      // padding: 8px 0px;
      .radio-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0px 5px 0px;
        width: 93%;
        border-bottom: 1px solid #f2f2f2;
        margin: 0 auto;
        font-size: 14px;
        color: #333;
      }
    }
  }
  .btn-style {
    position: absolute;
    left: 13%;
    bottom: 2%;
    .btn {
      width: 280px;
      height: 36px;
      border-radius: 19px;
      border: none;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      line-height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      &::after {
        border: none;
      }
      &[aria-disabled='true'] {
        background-color: #cccccc;
      }
      &[aria-disabled='false'] {
        background: linear-gradient(180deg, #739eca 0%, #abcde7 100%);
        &.btn-active {
          background: linear-gradient(180deg, #4d91d4 0%, #9fc8e7 100%);
        }
      }
    }
  }
}
</style>
